
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->

    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddList">添加分类</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 分类表格 -->
    <tree-table
      show-index
      index-text="#"
      :selection-type="false"
      :expand-type="false"
      :data="cateList"
      :columns="cols"
      border
    >
      <!--是否有效列模版 -->
      <template slot="isok" slot-scope="scope">
        <i
          style="color: lightGreen"
          class="el-icon-success"
          v-if="scope.row.cat_deleted == false"
        ></i>
        <i style="color: red" class="el-icon-error" v-else></i>
      </template>
      <!-- 排序 列模版-->
      <template slot="oder" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level == 0" type="success">一级菜单</el-tag>
        <el-tag v-else-if="scope.row.cat_level == 1">二级菜单</el-tag>
        <el-tag v-else type="danger"> 三级菜单</el-tag>
      </template>
      <!-- 操作模版 -->
      <template slot="opt" slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="delCateLsit(scope.row)"
          >删除</el-button
        >
      </template>
    </tree-table>
    <!-- 页码数据 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryDate.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryDate.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog
      @close="isclose"
      title="提示"
      :visible.sync="idAddCateShow"
      width="50%"
    >
      <!-- 内容区 -->
      <el-form
        :model="addCateFrom"
        :rules="addCateRules"
        ref="formAddCate"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateFrom.cat_name"></el-input>
        </el-form-item>
        <!-- 下拉框 -->
        <el-form-item label="父级分类">
          <!-- options 数据源 -->
          <el-cascader
            v-model="selectedCates"
            clearable
            :options="AddcateList"
            :props="{
              checkStrictly: true,
              expandTrigger: 'hover',
              value: 'cat_id',
              label: 'cat_name',
              children: 'children',
            }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="idAddCateShow = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created () {
    this.getCateList()
  },
  data () {
    return {
      // 添加类别用的规则对象
      addCateRules: {
        //   分类名字效验规则
        cat_name: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ]
      },
      // 添加表单数据对象
      addCateFrom: {
        cat_name: '', //   将要添加的数据名称
        cat_pid: 0, //  分类父级Id
        cat_level: 0 // 分类层级  `0`表示一级分类；`1`表示二级分类；`2`表示三级分类
      },
      // 控制添加对话框 隐藏
      idAddCateShow: false,
      // 商品分类列表
      cateList: [],
      //  查询参数对象
      queryDate: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      //   总数据行数
      total: 0,
      //   表格列定义
      cols: [
        {
          label: '分类名字',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          //   模版列
          type: 'template',
          //   模版名字
          template: 'isok'
        },
        {
          label: '排序',
          prop: 'cat_level',
          //   模版列
          type: 'template',
          //   模版名字
          template: 'oder'
        },
        {
          label: '操作',
          //   模版列
          type: 'template',
          //   模版名字
          template: 'opt'
        }
      ],
      //  添加分类是父类下拉框的数据
      AddcateList: [],
      //  添加分类时选中 分类的id
      selectedCates: []
    }
  },
  methods: {
    //   获取商品分类数据
    async getCateList () {
      const { data: resData } = await this.$http.get('categories', {
        params: this.queryDate
      })
      //   判断是否失败
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 如果成功 1 保存总数组行数 和 保存数组分类
      this.total = resData.data.total
      this.cateList = resData.data.result
    },
    // 页容量改变事件函数
    handleSizeChange (newsize) {
      // 修改的值传入 查询参数对象
      this.queryDate.pagesize = newsize
      this.getCateList()
    },
    // 页码发生改变的函数
    handleCurrentChange (newnum) {
      // 修改的值传入 查询参数对象
      this.queryDate.pagenum = newnum
      this.getCateList()
    },
    // 点击分类按钮获取当前数据
    async showAddList () {
      this.idAddCateShow = true
      // 获取父级数据
      const { data: resData } = await this.$http.get('categories', {
        params: { type: 2 }
      })
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      // 如果成功
      this.AddcateList = resData.data
    },
    // 新增分类框中 父级分类框改变的id 查看是几级
    handleChange () {
      //   每次分类选项发生改变时候
      //   如果没选中父类 说明是一级分类
      if (this.selectedCates.length === 0) {
        //   全都为1 级分类
        this.addCateFrom.cat_pid = 0
        this.addCateFrom.cat_level = 0
      } else if (this.selectedCates.length === 1) { //   如果选了 一个父类 说明是二级分类
        this.addCateFrom.cat_pid = this.selectedCates[0]
        this.addCateFrom.cat_level = 1
      } else if (this.selectedCates.length === 2) { //   如果选中了2个父类 说明是三级分类
        this.addCateFrom.cat_pid = this.selectedCates[1]
        this.addCateFrom.cat_level = 2
      }
    },
    // 重置新增表单
    isclose () {
      this.addCateFrom.cat_name = ''
      this.addCateFrom.cat_pid = 0
      this.addCateFrom.cat_level = 0
      //  重置重置分类下拉框
      this.selectedCates = []
    },
    // 添加分类确认按钮
    addCate () {
      // 先效验是否满足规则
      this.$refs.formAddCate.validate(async (a) => {
        // 如果效验失败
        if (!a) return
        // 如果效验成功
        const { data: resData } = await this.$http.post(
          'categories',
          this.addCateFrom
        )
        //   如果失败
        if (resData.meta.status !== 201) {
          return this.$message.error(resData.meta.msg)
        }

        //   如果成功
        this.$message.success(resData.meta.msg)

        //  如果当前是最后一页 就请求数据。 如果不是就不请求 把页面加1就行
        const totapage = Math.ceil(this.total / this.queryDate.pagesize)
        if (this.queryDate.pagenum === totapage) {
          this.getCateList()
        } else {
          // 只有一级才需要页码加一
          if (this.addCateFrom.cat_level === 0) {
            this.total++
          } else {
            this.getCateList()
          }
        }
        // 重置表单
        this.isclose()
        this.idAddCateShow = false
      })
    },
    // 删除
    async delCateLsit (DataCate) {
      //   console.log(DataCate)
      //   console.log(DataCate.cat_id)
      const { data: resData } = await this.$http.delete(
        `categories/${DataCate.cat_id}`
      )
      console.log(resData)
      if (resData.meta.status !== 200) { return this.$message.error(resData.meta.msg) }
      this.$message.success(resData.meta.msg)
      this.getCateList()
    }
  }
}
</script>

<style lang="postcss" scoped>
.el-cascader {
  width: 100%;
}
</style>
